<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var productsTable = {	
	products : [ {
		id : '21',	price : 7889.04,
		details : {producer : 'Facebook',comment : 'Very new but good'},
		expanded : true
	}, {
		id : '22',	price : 3467.05,
		details : {producer : 'IBM And partners',comment : 'Old and mature'},
		expanded : false
	}, {
		id : '23',	price : 120000.05,
		details : { producer : 'Microsoft',comment : 'Compatible with Office'},
		expanded : false
	}, {
		id : '27',	price : 2300.00,
		details : {producer : 'Oracle',comment : 'Compatible with all'},
		expanded : false
	}, {
		id : '28',	price : 45456.00,
		details : {producer : 'Google',comment : 'Compatible with Crome'},
		expanded : false
	} ],
	
	toggleDetails : function(gnatooContext, product) {
		var currentStatus = product.expanded;
		
		product.expanded = !product.expanded;
		
		// becouse of animation, render should happend in the callback
		gnatooContext.cancelRender = true;
		if (currentStatus == false) { 
			gnatooContext.beforeRenderEffects.push(function(gnatooContext) { 
					$(gnatooContext.eventElement).parent().parent().next().css({ 'display' : 'table-row'});
					$(gnatooContext.eventElement).parent().parent().next().find('.details').slideDown(400, function() {
						gnatooContext.render();
					});
					
			});
		} else {
			gnatooContext.beforeRenderEffects.push(function(gnatooContext) { 
					$(gnatooContext.eventElement).parent().parent().next().find('.details').slideUp(400, function() {
						$(gnatooContext.eventElement).parent().parent().next().css({ 'display' : 'none'});
						gnatooContext.render();
					});
					
			});
		}
	},

};
</script>


<script type="text/javascript">
var Borderlayout = {	
  test : 'hello from Borderlayout',

  createBorderLayout : function(context) {
	  $(context.data.newDomElement).layout({ applyDefaultStyles: true });
  } 
};
</script>
<div id="Borderlayout" style="overflow: visible; ">
<script type="text/html">
<div style="position: relative; width: 670px ">
<div oncreate="this.data.Borderlayout.createBorderLayout(this)" style="height: 500px;">
<DIV class="ui-layout-center">Center

  <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<thead>
    <tr>
		<th style="width: 20px"></th>
		<th style="width: 200px">id</th>
		<th style="width: 200px">price</th>
	</tr>
	</thead>
	<tbody>
	<loop value="#{.productsTable.products}" var="row">
		<tr>
			<td>
				<a href="#" onclick="#{.productsTable.toggleDetails(this, .row)}">#{.row.expanded ? 'close' : 'details' }</a>
			</td>
			<td>#{.row.id}</td>
			<td>#{.row.price}</td>
		</tr>
		<tr style="display:#{.row.expanded ? 'table-row' : 'none'}">
			<td colspan="3" style="padding: 0px;">
				<div id="#{.row.id}" style="padding: 30px;height: 0px;display:#{.row.expanded ? 'block' : 'none'};" class="details">#{.row.details.producer}</div>
			</td>
		</tr>
	</loop>
	</tbody>
  </table>

</DIV>

<DIV class="ui-layout-north">North</DIV>

<DIV class="ui-layout-south">South</DIV>

<DIV class="ui-layout-east">East</DIV>

<DIV class="ui-layout-west">West</DIV>

</div>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Borderlayout'); 
	// bind model
	gnatooContext.data['Borderlayout'] = Borderlayout;
	gnatooContext.data['productsTable'] = productsTable;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


